@import 'colors';
@import 'values';
@import 'fonts';
@import 'mixins';

@import 'common';
@import 'menu';
@import 'form';

html {
    height:100%;

    body {
        width:100%;
        height:100%;
        display: table;
        font: 16px 'PT Sans Narrow';
        background: {
            image: image-url('body.jpg');
            repeat:no-repeat;
            position:center center;
            size: cover;
            attachment:fixed
        }

        h1 {
            a {
                text-decoration: none;
            }
        }

        h2 {
            color:rgba($grey, 0.7);
            background: image-url('h2-border.png') repeat-x 0 center;

            >span {
                padding:5px 20px;
                background:white;
                margin-left:20px
            }

            a {
                text-decoration:none;
                color:rgba($grey, 0.7)
            }
        }

        .breadcrumbs {
            a {
                color:rgba($grey, 0.6);

                &:hover {

                }
            }
        }

        .cell {
            display:table-cell;
            text-align:center;
            vertical-align: middle;
        }

        .top-space {
            height:$header-height;
            display: table-row;
        }

        header {
            position:fixed;
            z-index: 99;
            left:0;
            top:0;
            width:100%;
            background: $blue;
            height:$header-height;
            @include box-shadow(0, 0, 10px, black);
            transition: 0.2s all;

            .cell {
                margin:0 auto;
                display:block;
            }

            .width-container {
                position:relative;

                #logo {
                    float:left;
                    margin-right:10px;
                    height:$header-height;
                    overflow:hidden;

                    img {
                        padding:14px 30px 0 4px;
                    }
                }
            }
        }

        .price {
            font-weight:bolder;
            font-size:1.5em;
            background:$blue-light;
            color:white;
            padding:4px 8px;
            display:inline-block;

            .currency {
                font-size:0.8em;
                font-weight:normal;
                display:inline-block;
                margin-left:5px
            }
        }

        #main {
            display: table-row;
            color:white;
            @include text-shadow(1px, 1px, 2px, black);

            .cell {
                .width-container {

                    &.full {
                        display:table;
                        height:100%;

                        .white-bg {
                            display: table-row;
                        }
                    }

                    .white-bg {
                        background:white;
                        color:$grey;
                        text-shadow: none;
                        text-align: left;
                        color:$grey;
                        @include text-shadow-none;
                    }

                    .submenu {
                        list-style:none;
                        background:rgba($grey, 0.3);
                        padding:0 10px;
                        margin:0 0 20px;

                        li {
                            display:inline-block;

                            a {
                                display:block;
                                padding: 5px 10px;
                                text-decoration:none;
                                color:$grey;
                                text-transform: uppercase;

                                &:hover, &.selected {
                                    background:$blue;
                                    color:white;
                                }
                            }
                        }
                    }

                    form {
                        background:white;
                        color:$grey;
                        padding:20px;

                        input, textarea {
                            font-size:18px;
                        }
                    }

                    .captcha {
                        float:left;

                        label {
                            display:inline-block;
                            margin-right:5px;
                            width:auto;
                        }

                        input {
                            width:60px;
                            text-align:center;
                        }

                        img {
                            height:26px;
                            vertical-align: middle
                        }
                    }

                    ul.products {
                        list-style:none;
                        margin-bottom:30px;
                        float:left;
                        width:100%;
                        clear:both;
                        overflow: hidden;

                        li {
                            display:block;
                            float:left;
                            width:30%;
                            margin-right:5%;
                            text-align:center;

                            &:nth-child(2n+1) {
                                margin-right:0
                            }

                            img {
                                height:200px;
                            }

                            h3 {
                                font-weight:normal;
                                font-size: 24px;
                            }

                            .price {
                                font-size:1em;
                                color:$grey;
                                padding:0;
                                background:none
                            }
                        }
                    }

                }
            }
        }

        footer {
            display: table-row;
            clear:both;
            text-align: center;
            height: 5%;

            .width-container {
                padding:10px 0;
                background:rgba(black, 0.33);
                color:rgba(white, 0.5);
                width:100%
            }
        }
    }

    &.scroll {
        body {
            padding-top:0.66*$header-height;
            
            header {
                position:fixed;
                left:0;
                top:0;
                width:100%;
                z-index:9999;
                height:0.66*$header-height;

                .cell {
                    display:block;

                    #logo {
                        height:0.66*$header-height;

                        img {
                            height:0.45*$header-height;
                            padding:7px 10px 0 4px
                        }
                    }

                    menu {
                        li {
                            a {
                                line-height:0.66*$header-height;
                            }
                        }
                    }
                }
            }
        }
    }
}

@import 'tablet';
@import 'mobile';